<?php
/**
 * 归档页面
 * talk
 * @package custom
 */

if (!defined('__TYPECHO_ROOT_DIR__')) exit;
 $this->need('header.php');
 ?>
<div class="container">
	<div class="ui-timeLine">
		
<?php $this->widget('Widget_Contents_Post_Recent', 'pageSize=10000')->to($archives);   
    $year=0; $mon=0; $i=0; $j=0;   
    $output = '<div id="archives">';   
    while($archives->next()):   
        $year_tmp = date('Y',$archives->created);   
        $mon_tmp = date('m',$archives->created);   
        $y=$year; $m=$mon;   
        if ($mon != $mon_tmp && $mon > 0) $output .= '</ul></li>';   
        if ($year != $year_tmp && $year > 0) $output .= '</ul>';   
        if ($year != $year_tmp) {   
            $year = $year_tmp;
            $output .= '<span class="badge badge-secondary">'. $year .' 年</span><ul class="al_mon_list">'; //输出年份   
        }   
        if ($mon != $mon_tmp) {   
            $mon = $mon_tmp;
            $output .= '<li><button type="button" class="btn btn-outline-secondary">'. $mon .' 月</button><ul class="al_post_list">'; //输出月份   
        }
        $output .= '<div class="alert alert-danger" role="alert">'.date('d日: ',$archives->created).'<a href="'.$archives->permalink .'" class="text-muted">'. $archives->title .'</a> </div>'; //输出文章日期和标题   
    endwhile;   
    $output .= '</ul></li></ul></div>';
    echo $output;
?>
		<div class="activeLine"></div>
	</div>
</div>
<script>
	(function($) {
		$.fn.uiTimeLine = function() {
			var $timeLine = $(".ui-timeLine");
			var $activeLine = $(".ui-timeLine .activeLine");
			var $dots = $(".ui-timeLine .dot");
			var $cboxs = $(".ui-timeLine .item .cbox");
			return this.each(function() {
				function setActiveLineHeight() {
					let height = $(document).scrollTop() + window.screen.height;
					let j = 0;
					for (let i = 0; i < $dots.length; i++) {
						if ($($dots[i]).offset().top < height) {
							$($($dots[i])).addClass("active");
							$($cboxs[i]).css({
								"left": 0
							});
							j = i;
						} else {
							$($($dots[i])).removeClass("active")
							$($cboxs[i]).css({
								"left": "100vw"
							});
						}
					}
					$activeLine.css({
						"height": $($dots[j]).offset().top - $timeLine.offset().top + 40 + "px"
					})
				}
				$(window).on('scroll', setActiveLineHeight);
				setActiveLineHeight();
			})
		}
	})(jQuery);
</script>
<script>
	var vue_data = new Vue({
		el: ".ui-timeLine",
		data: {
			items: ["32", "21", "131", "", "", "", "", "", "", "", "", "", ""],
		},
		mounted: function() {
			$(".ui-timeLine").uiTimeLine();
		},
	});
</script>
 <?php $this->need('footer.php'); ?>